<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据字典</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/jquery.hammer/hammer.min.js"></script>
    <script src="/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="/js/jquery.ztree.all.min.js"></script>
    <script src="/js/dialog.js"></script>
    <script src="/js/comm.js" type="text/javascript"></script>

    <link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="/css/zTreeStyle.css" rel="stylesheet" />
    <link href="/css/dialog.css" rel="stylesheet" />
    <link href="/css/common.css" rel="stylesheet" />
</head>
<script type="text/javascript">
    var dictionaryValue ="";
    var dictionaryName ="";
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        async: {
            enable: true,
            type: "post",
            url: "/system/getDictTree.do",
            autoParam: ["id"]
        },
        check: {
            enable: false
        },
        callback: {
            onClick: zTreeOnClick
        }
    };

    var nodes = [
        { "id":1,
            "name":"数据字典",
            "isParent" :true,
            "nocheck":true,
            children: []
        }
    ]

    $(function () {
        //调用函数，初始化表格
        initTable();
        initInput();
        //新增
        $("#btn_add").on("click",function () {
            addDict();
        })

        //修改
        $("#btn_edit").on("click",function () {
            editDict();
        })

        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
    })

    function addDict(){
        clearInput();
        $("#dictDataValue").removeAttr("readonly");
        if(dictionaryValue!=null&&dictionaryValue!=""){//字典数据
            $("#dictType").html(dictionaryName);
            var elem1 = document.getElementById('addEditDictDataForm');
            dialog({
                title: "字典数据",
                content: elem1,
                width: '40em',
                okValue: "确定",
                ok: function () {
                    if(saveCheckDataInfo()){
                        var dataValue = {};
                        dataValue["dictDataName"] = $("#dictDataName").val();
                        dataValue["dictDataValue"] = $("#dictDataValue").val();
                        dataValue["isUse"] = $("#isUse").val();
                        dataValue["dictValue"] = dictionaryValue;

                        $.post("/system/addDictData.do",dataValue,function (data) {
                            promptDail(data.info);
                            initTableData(dictionaryValue,"/system/getDictDataList.do", dictionaryName);
                        },"json")
                    }else {
                        return false;
                        promptDail('请填写完整数据!');
                    }
                },
                cancelValue: '取消',
                cancel: function () {}
            }).showModal();
        }else{//字典类型
            var elem = document.getElementById('addEditDictForm');
            dialog({
                title: "字典类型",
                content: elem,
                width: '40em',
                okValue: "确定",
                ok: function () {
                    if(saveCheckInfo()){
                        var dataValue = {};
                        dataValue["dictName"] = $("#dictName").val();
                        dataValue["dictValue"] = $("#dictValue").val();

                        $.post("/system/addDict.do",dataValue,function (data) {
                            promptDail(data.info);
                            initTable();
                        },"json")
                    }else {
                        return false;
                        promptDail('请填写完整数据!');
                    }
                },
                cancelValue: '取消',
                cancel: function () {}
            }).showModal();
        }
    }

    function zTreeOnClick(event, treeId, treeNode) {
        var treeId = treeNode.id;
        var treeName = treeNode.name;
        if(treeId==1||treeId=="1"){
            initTable();
        }else{
            initTableData(treeId,"/system/getDictDataList.do", treeName);

        }
    };

    function editDict() {
        var valueInfo = $('#mytab').bootstrapTable('getSelections');
        if(valueInfo!=null&&valueInfo!=""&&valueInfo.length>0){
            if(dictionaryValue!=null&&dictionaryValue!=""){
                $.post("/system/getDictData.do",{"id":valueInfo[0].id},function(data){
                    clearInput();
                    $("#dictDataValue").attr({readonly:"true"});
                    $("#dictDataName").val(data.info.dictdataName);
                    $("#dictDataValue").val(data.info.dictdataValue);
                    $("#isUse").val(data.info.isUse);

                    var dataId = data.info.dataId;
                    var dictionaryValues = data.info.dictValue;

                    $("#dictType").html(dictionaryName);
                    var elem1 = document.getElementById('addEditDictDataForm');
                    dialog({
                        title: "字典数据",
                        content: elem1,
                        width: '40em',
                        okValue: "确定",
                        ok: function () {
                            if(saveCheckDataInfo()){
                                var dataValue = {};
                                dataValue["dictDataName"] = $("#dictDataName").val();
                                dataValue["isUse"] = $("#isUse").val();
                                dataValue["dictValue"] = dictionaryValues;
                                dataValue["id"] = dataId;

                                $.post("/system/editDictData.do",dataValue,function (data) {
                                    promptDail(data.info);
                                    initTableData(dictionaryValue,"/system/getDictDataList.do", dictionaryName);
                                },"json")
                            }else {
                                return false;
                                promptDail('请填写完整数据!');
                            }
                        },
                        cancelValue: '取消',
                        cancel: function () {}
                    }).showModal();
                },"json");
            }else{
                promptDail('只能修改字典数据!');
            }

        }else {
            promptDail('请选择一条数据!');
        }
    }

    function clearInput(){
        $("#dictType").html("");
        $("#dictName").val("");
        $("#dictValue").val("");
        $("#dictDataName").val("");
        $("#dictDataValue").val("");
        $("#isUse").val("0");
    }

    //失去焦点判断是否为空
    function initInput() {
        $("#dictName").blur(function(){  // 失去焦点
            var info = $(this).val();
            if(info!=null&&info!=""){
                $(this).next().hide();
            }else {
                $(this).next().show();
            }

        });
        $("#dictValue").blur(function(){
            var info = $(this).val();
            if(info!=null&&info!=""){
                $(this).next().hide();
            }else {
                $(this).next().show();
            }

        });
        $("#dictDataName").blur(function(){  // 失去焦点
            var info = $(this).val();
            if(info!=null&&info!=""){
                $(this).next().hide();
            }else {
                $(this).next().show();
            }

        });
        $("#dictDataValue").blur(function(){
            var info = $(this).val();
            if(info!=null&&info!=""){
                $(this).next().hide();
            }else {
                $(this).next().show();
            }

        });
    }

    //判断是否为空
    function saveCheckInfo(){
        var b = true;
        var dictName = $("#dictName").val();
        if(dictName!=null&&dictName!=""){
            $("#dictName").next().hide();
        }else {
            $("#dictName").next().show();
            b = false;
        }

        var dictValue = $("#dictValue").val();
        if(dictValue!=null&&dictValue!=""){
            $("#dictValue").next().hide();
        }else {
            $("#dictValue").next().show();
            b = false;
        }

        return b;
    }
    
    function saveCheckDataInfo() {
        var b = true;
        var dictDataName = $("#dictDataName").val();
        if(dictDataName!=null&&dictDataName!=""){
            $("#dictDataName").next().hide();
        }else {
            $("#dictDataName").next().show();
            b = false;
        }

        var dictDataValue = $("#dictDataValue").val();
        if(dictDataValue!=null&&dictDataValue!=""){
            $("#dictDataValue").next().hide();
        }else {
            $("#dictDataValue").next().show();
            b = false;
        }
        return b;
    }

    function initTable() {
        dictionaryValue = "";
        dictionaryName = "";
        //先销毁表格
        $('#mytab').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#mytab").bootstrapTable({
            method: "post",  //使用get请求到服务器获取数据
            contentType: "application/x-www-form-urlencoded",
            url: "/system/getDictList.do", //获取数据的Servlet地址
            sidePagination: "server", //表示服务端请求
            queryParamsType:'',
            cache: false,
            striped: true,
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    codeValue : $("#codeValue").val()
                };
                return param;
            }
        });

    }

    function initTableData(dictValue, urls, dictName) {
        dictionaryValue = dictValue;
        dictionaryName = dictName;
        //先销毁表格
        $('#mytab').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#mytab").bootstrapTable({
            method: "post",  //使用get请求到服务器获取数据
            contentType: "application/x-www-form-urlencoded",
            url: urls, //获取数据的Servlet地址
            sidePagination: "server", //表示服务端请求
            queryParamsType:'',
            cache: false,
            striped: true,
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    dictValue: dictValue,
                    codeValue : $("#codeValue").val()
                };
                return param;
            }
        });

    }
</script>
<body style="padding:5px;overflow:auto;">
<div style="width: 15%;float:left;border-right: 1px solid #ffffff;">
    <ul id="treeDemo" class="ztree">

    </ul>
</div>
<div style="width: 85%;float:left;">

    <div class="panel panel-default" >
        <div class="panel-heading">
            查询条件
        </div>
        <div class="panel-body form-group" style="margin-bottom:0px;">
            <form id="searchForm">
                <label class=" control-label" style="float:left;text-align: left; margin-top:5px">code值：</label>
                <input type="text" class="form-control" style="width: 100px;float:left;" name="codeValue" id="codeValue"/>
                <div class="col-sm-1" style="float:left;">
                    <button class="btn btn-primary" id="search_btn" onclick="initTable();return false;">查询</button>
                </div>
            </form>
        </div>
    </div>
    <div id="toolbar" class="btn-group pull-right"  style="margin: 0px 0px 5px 0px;">
        <button id="btn_edit" type="button" class="btn btn-default btn-purview" style=" border-radius: 0">
            <span class="glyphicon glyphicon-pencil"  ></span>修改
        </button>
        <button id="btn_add" type="button" class="btn btn-default btn-purview">
            <span class="glyphicon glyphicon-plus" ></span>新增
        </button>
    </div>
    <table id="mytab" data-toggle="table" class="table table-hover table-bordered" data-single-select="true"
           data-toolbar-align="right" data-toolbar="#toolbar" data-pagination="true"  data-page-size="5" data-striped="true"
           data-page-list="[5,10,20,30]" data-pagination-h-align="right" data-pagination-detail-h-align="left"
           data-pagination-loop="false" data-click-to-select="true" >
        <colgroup>
            <col style="width: 3%">
            <col style="width: 7%">
            <col style="width: 25%">
            <col style="width: 20%">
            <col style="width: 10%">
            <col style="width: 10%">
        </colgroup>
        <thead>
        <tr >
            <th data-align="center" data-valign="middle" data-checkbox="true" ></th>
            <th data-align="center" data-valign="middle" data-field="id">id</th>
            <th data-align="center" data-valign="middle" data-field="dictName">名称</th>
            <th data-align="center" data-valign="middle" data-field="dictValue">code值</th>
            <th data-align="center" data-valign="middle" data-field="isUse" data-formatter="initFormat">是否启用</th>
            <th data-align="center" data-valign="middle" data-formatter="initEdit">操作</th>
        </tr>
        </thead>
    </table>
</div>

<div id="addEditDictForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;height: 150px;overflow-x: hidden;overflow-y: auto;">
        <form class="form-horizontal" id="nodeForm" role="form">
            <div class="form-group">
                <label class="col-sm-3 control-label">字典类型:</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="dictName" name="dictName"  placeholder="请输入字典类型"/>
                    <span class="help-block" style="color: red; display: none;">请输入字典类型</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">字典类型Code值:</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="dictValue" name="dictValue"  placeholder="请输入字典类型Code值"/>
                    <span class="help-block" style="color: red; display: none;">请输入字典类型Code值</span>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="addEditDictDataForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;height: 260px;overflow-x: hidden;overflow-y: auto;">
        <form class="form-horizontal" id="nodeDataForm" role="form">
            <div class="form-group">
                <label class="col-sm-3 control-label">字典类型:</label>
                <div class="col-sm-8">
                    <p class="help-block" id="dictType"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">字典名称:</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="dictDataName" name="dictName"  placeholder="请输入字典名称"/>
                    <span class="help-block" style="color: red; display: none;">请输入字典名称</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">字典数据Code值:</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="dictDataValue" name="dictDataValue"  placeholder="请输入字典数据Code值"/>
                    <span class="help-block" style="color: red; display: none;">请输入字典数据Code值</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否启用:</label>
                <div class="col-sm-8">
                    <select class="form-control" id="isUse" name="isUse" style="width: 20%">
                        <option value="0" >是</option>
                        <option value="1" >否</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    function initFormat(val, row, index) {
        if(val==1||val=="1"){
            return "关闭";
        }else {
            return "启用";
        }
    }
    function initEdit(val, row, index) {
        var isUse = String(row.isUse);
        if(isUse=="undefined"||isUse==""||isUse==undefined||isUse==null){
            var html = "<a href=\"javascript:void(0)\" onclick=\"initTableData('"+row.dictValue+"','/system/getDictDataList.do','"+row.dictName+"')\">【查看字典数据】</a>"
            return html;
        }

    }
</script>
</html>